<template>
  <div
    class="bottomMenuMainComponent"
    v-if="item"
    :style="{
      borderColor: item.splitLineColor,
      backgroundColor: item.iconStyle === 1 ? item.bgColor : '',
    }"
  >
    <ul v-if="item.iconStyle === 0" class="iconMenu">
      <li
        v-for="iconItem in item.iconContent"
        :key="iconItem.id"
        :style="{
          width: parseInt(100 / item.iconContent.length) + '%',
          flexDirection: item.iconPosition,
          backgroundColor: iconItem.active
            ? item.activeMenuBgColor
            : item.menuBgColor,
        }"
      >
        <i
          :class="iconItem.icon"
          :style="{
            fontSize: item.iconPosition == 'row' ? '16px' : '20px',
            color: iconItem.active ? item.activeIconColor : item.iconColor,
            marginRight: item.iconPosition == 'row' ? '5px' : '0px',
          }"
        ></i>
        <span
          :style="{
            color: iconItem.active ? item.activeTitleColor : item.titleColor,
          }"
          >{{ iconItem.name }}</span
        >
        <span
          class="badge"
          v-if="iconItem.badge && item.badgeDisplay"
          :style="{
            backgroundColor: item.badgeBgColor,
            marginLeft: item.iconPosition == 'row' ? '24px' : '8px',
          }"
          >4</span
        >
      </li>
    </ul>
    <ul v-if="item.iconStyle === 1" class="imgMenu">
      <li
        v-for="imgItem in item.imgContent"
        :key="imgItem.id"
        :style="{
          width: parseInt(100 / item.imgContent.length) + '%',
        }"
      >
        <img
          :src="imgItem.activeImg || menu_img_active"
          alt=""
          v-if="imgItem.active"
        />
        <img :src="imgItem.img || menu_img" alt="" v-else />
        <span
          class="badge"
          v-if="imgItem.badge && item.badgeDisplay"
          :style="{ backgroundColor: item.badgeBgColor }"
          >4</span
        >
      </li>
    </ul>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import menu_img from "@/static/images/menu_img.png";
import menu_img_active from "@/static/images/menu_img_active.png";
export default {
  name: "bottomMenuMainComponent",
  data() {
    return {
      item: null,
      menu_img,
      menu_img_active,
    };
  },
  created() {},
  props: ["controlData"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    Bus.$on("updateBottomMenuMainComponentData", (params) => {
        if(params.ename=="iconContent"||params.ename=="imgContent"){
            this.item[params.ename] = JSON.parse(params.data);
        }else{
            this.item[params.ename] = params.data;
        }
    });
    Bus.$on("updateBottomMenuMainComponentAllData", (params) => {
      let controlData = JSON.parse(params);
      this.item = JSON.parse(JSON.stringify(controlData.main));
    });
  },
  methods: {
    //页面初始化
    init() {
      this.item = null;
      this.item = JSON.parse(JSON.stringify(this.controlData.main));
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang="scss">
.bottomMenuMainComponent {
  width: 100%;
  height: 50px;
  border-top: 1px solid transparent;
  box-sizing: border-box;
  display: flex;
  .iconMenu {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    li {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        display: flex;cursor: pointer;
      }
      span {
        font-size: 12px;cursor: pointer;
      }
    }
  }
  .imgMenu {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    li {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: auto;
        height: 100%;
        display: block;cursor: pointer;
        max-width: 100%;
      }
    }
  }
  .iconMenu,
  .imgMenu {
    li {
      position: relative;
      .badge {
        position: absolute;
        top: 5px;
        left: 50%;
        display: inline-block;
        height: 14px;
        line-height: 14px;
        max-width: 37px;
        min-width: 14px;
        padding: 0 2px;
        font-size: 8px;
        border-radius: 10px;
        text-align: center;
        margin-left: 8px;
        color: #fff;
      }
    }
  }
}
</style>